<template>
  <div class="box">
    <div class="box-title">店铺数据</div>
    <div class="box-list flex">
      <div class="box-item flex" v-for="(item,index) in shopDataWay" :key="index">
        <div class="value">{{item.value}}</div>
        <div class="title">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopDataWay: [
        {
          title: "退款",
          key: "returnMoney",
          value: "0",
        },
        {
          title: "退货",
          key: "returnGoods",
          value: "0",
        },
        {
          title: "待上架",
          key: "waitUpper",
          value: "0",
        },
        {
          title: "审核中",
          key: "waitAuth",
          value: "0",
        },
        {
          title: "待参加活动",
          key: "seckillNum",
          value: "0",
        },
        {
          title: "待处理",
          key: "deliveredOrder",
          value: "0",
        },
      ],
    };
  },
  props: ['res'],
  watch: {
    res: {
      handler(val) {
        // 判断父级是否给子级调用数据
        if (typeof val == "object") {
          Object.keys(val).map((key) => {
            this.shopDataWay.map((item) => {
              if (key == item.key) {
                this.$set(item, "value", val[key]);
              }
            });
          });
        }
      },
      immediate: true,
    },
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "@/pages/tabbar/home/template/styles.scss";
.box-item {
  width: 33%;
  margin: 20rpx 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  > .value {
    font-weight: bold;
    font-size: 32rpx;
    margin-bottom: 10rpx;
  }
  > .title {
    font-size: 24rpx;
    color: #999;
  }
}
.box-list {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
</style>